<script setup>
import { ref, onMounted, toRefs } from 'vue'
import { unit2 } from '../unit.js'
import link from '../link.js'
import { ElMessage } from 'element-plus'

const props = defineProps({
    config: Object,
});

const { config } = toRefs(props)

//向父级传递消息
const emits = defineEmits(['onAdd', 'onDel', 'onAcitve'])
function sindEmit() {
    emits('onAdd', ...arguments);
}
function sindActive() {
    emits('onAcitve', ...arguments);
}

function onClose(item, index) {
    const id = item.img;
    imgUse(JSON.parse(JSON.stringify(item)), index, false);
    item.img=0;
    item.size=[1,1];
    emits('onDel', id);
}

function imgUse(item, index, _use) {
    for(var i=index;i<config.value.grid.length;i++){
        var grid = config.value.grid[i]
        if(grid.col==item.size[0]+item.col-1 && grid.row==item.size[1]+item.row-1){
            grid.use = _use;
            break; //到达结束块结束循环
        }else if(grid.col<=item.size[0]+item.col-1 && grid.row<=item.size[1]+item.row-1 && grid.col>=item.col && grid.row>=item.row){
            grid.use = _use;
        }
    }
}

var grid_start=false, grid_obj, grid_index;
function onGrid(item, index) {
    if(!grid_start){
        grid_obj=item;
        grid_obj._h=true;
        grid_index = index;
        grid_start = true;
        return;
    }
    //二次
    var notImg = true;
    if(item.row<grid_obj.row || item.col<grid_obj.col){
        ElMessage({ message: "请向右下区域选取！", type: 'warning' })
        grid_start=false;
        return;
    }
    for(var i=grid_index;i<=index;i++){
        const grid = config.value.grid[i]
        if(grid.row>=grid_obj.row && grid.row<=item.row && grid.col>=grid_obj.col && grid.col<=item.col){
            if(grid.use){
                notImg = false;
                break;
            }
        }
    }
    if(notImg){
        grid_obj.size = [item.col-grid_obj.col+1, item.row-grid_obj.row+1];
        grid_start=false;
        imgUse(grid_obj, grid_index, true);
        onGridOver();
        sindEmit(grid_obj)
    }else{
        ElMessage({ message: "区块被占用！", type: 'error' })
        grid_start=false;
        return;
    }
    
}
function onGridOver(item) {
    for(var i=grid_index;i<config.value.grid.length;i++){
        const grid = config.value.grid[i]
        if(grid_start && grid.row>=grid_obj.row && grid.row<=item.row && grid.col>=grid_obj.col && grid.col<=item.col){
            grid._h=true;
        }else{
            grid._h=false;
        }
    }
}

</script>

<template>

    <div class="box flexrow" :style="{
        width: '280px',
        height: '280px'
    }">
        <div :class="'con'+(config?.row)" v-for="(item, index) in config?.grid">
            <div :class="['bg',{hover:item._h}]" @click="onGrid(item, index)" @mouseover="onGridOver(item)"></div>
            <div v-if="item.img" class="img" :style="{
                width: item.size[0]+'00%',
                height: item.size[1]+'00%',
                zIndex: item.img?9:1
            }">
                <img :src="config?.list.find(e=>e.imgid==item.img).url" class="objcover" @click.stop="sindActive(item.img)">
                <div class="size evenone">{{ Math.round(item.size[0]*(750/config.row))+'*'+Math.round(item.size[1]*(750/config.row)) }}</div>
                <a class="close" @click.stop="onClose(item, index)">×</a>
            </div>
        </div>
    </div>


</template>

<style scoped>
    .box{min-height: 93px;margin: 0 auto;}
    .bg{width: 100%;height: 100%;background-color: white; border: #eee 1px solid;}
    .bg.hover{background-color: #bfe8ff;}
    .con4{width: 25%;height: 25%;position: relative;}
    .con5{width: 20%;height: 20%;position: relative;}
    .con6{width: 16.666%;height: 16.666%;position: relative;}
    .img{
        position: absolute; left: 0;top: 0;border: #eee 1px solid;
        width: 100%;height: 100%;overflow: hidden;
    }
    .img:hover,img.active{border: dodgerblue 1px solid;}
    .img img{background-color: white;}
    .img .close{
        position: absolute;right: 2px;top: 2px;cursor: pointer;
        width: 18px;height: 18px;line-height: 18px;text-align: center;
        background-color: #999;color: white;font-size: 12px;
    }
    .img .close:hover{background-color: red;}
    .size{
        position: absolute;left: 0;top: 50%;width: 100%;margin-top: -18px;
        font-size: 12px;color: #95f8ff;text-align: center;
        text-shadow: black 0 1px 2px, rgba(0,0,0,.6) 0 1px 6px;
    }
</style>